<template>
  <a-upload v-model:file-list="fileList" name="file" list-type="picture-card" class="avatar-uploader"
    :show-upload-list="false" :action="uploaddUrl" :before-upload="beforeUpload" :headers="uploadHeaders"
    @change="handleChange">
   <!-- {{base_url}} ---- {{base_url + imageUrl}}--{{ imageUrl }} -->
   <!-- <img :src="base_url + imageUrl" alt=""> -->
    <img v-if="imageUrl" :src="base_url + imageUrl" alt="avatar" class="img" />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else style="font-size: 40px"></plus-outlined>
    </div>
  </a-upload>
</template>
<script lang="ts">
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { defineComponent, ref, reactive, watch } from "vue";
import type { UploadChangeParam, UploadProps } from "ant-design-vue";
import { getToken } from "@/utils/auth/index";
const windowsIndestance: any = window;
export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  props: {
    uploadUrl: {
      type: String,
      default: windowsIndestance.config.base_url + "files/upload/image",
    },
    base_url: {
      type: String,
      default: windowsIndestance.config.base_url,
    },
    value: {
      type: String,
      default: "",
    },
  },
  emits: ["changeValuie", "change"],
  setup(props, { emit }) {
    const fileList = ref([]);
    const loading = ref<boolean>(false);
    const imageUrl = ref<string>(props.value);

    const uploaddUrl = ref<string>("");
    const base_url = props.base_url;
    const uploadHeaders = reactive({
      Authorization: getToken(),
    });
    watch(
      () => props.value,
      (newVal) => {
        imageUrl.value = newVal;
      }
    );
    uploaddUrl.value = props.uploadUrl;
    function handleChange(info: UploadChangeParam) {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        imageUrl.value = info.file.response.data;
        loading.value = false;
        emit("changeValuie", info.file.response.data);
        emit("change", info.file.response.data);
      }
      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
    }

    const beforeUpload = (file: UploadProps["fileList"][number]) => {
      const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("只能上传JPG、PNG格式的图片!");
      }

      return isJpgOrPng;
    };

    return {
      fileList,
      loading,
      imageUrl,
      uploaddUrl,
      uploadHeaders,
      base_url,
      handleChange,
      beforeUpload,
    };
  },
});
</script>
<style>
.avatar-uploader>.ant-upload {
  width: 128px;
  height: 128px;
}

.img {
  width: 100%;
  height: 100%;
}

.ant-upload-select-picture-card i {
  color: #999;
  font-size: 32px;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
